import React, { useState, useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
import c from './css/index.module.scss'
import ReactDOM from 'react-dom'
import { Tabs, Input, Button, Rate } from 'antd';
import axios from 'axios'
import { useLocation } from 'react-router-dom';


import { HashRouter as Router, Route, NavLink, Redirect, Switch ,useParams } from 'react-router-dom'



export default function Home() {

    // 保存数据到sessionStorage
    // sessionStorage.setItem('email', '1767409776');

    // 从sessionStorage获取数据
    var datas = sessionStorage.getItem('email');
    // console.log(datas,999999999999)

    // console.log(this.props.location,11111111111111111111)


    let param = useParams()
    // console.log(param.bookID,6666666)


    let arr = ['玄幻', '升级', '热血', '玄幻', '升级', '热血']
    let arr2 = ['第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神', '第6738章：护神']
    let arr3 = [
        { tx: 'https://s.kjcdn.com/i/pubrs/2s/2s/18wxk.jpg', content: "啊发 生的广泛大使馆沙发撒", user: "玛玛哈哈" }, { tx: 'https://s.kjcdn.com/i/pubrs/2s/2s/18wxk.jpg', content: "啊发生的广    泛大使馆沙发撒", user: "玛玛哈哈" }, { tx: 'https://s.kjcdn.com/i/pubrs/2s/2s/18wxk.jpg', content: "啊发生的广泛大使馆沙发撒", user: "玛玛哈哈" }, { tx: 'https://s.kjcdn.com/i/pubrs/2s/2s/18wxk.jpg', content: "啊发生的广泛大使馆沙发撒", user: "玛玛哈哈" }]

    // 标签页
    const TabPane = Tabs.TabPane;
    function callback(key) {
        console.log(key);
    }

    // 文本框
    const { TextArea } = Input;
    const [text, setText] = useState('66')
    const onChange = (e) => {
        // console.log('Change:', e.target.value);
        setText(e.target.value)
        // console.log(setBook)
    };
    let submit = async () => {
        if(datas){
            let res = await axios('/comment', { params: { content: text, user: datas, book: param.bookID } })

            getcomments()
        }else{
            alert('还未登录，请先登录!')
        }
       
    }

    let zuishu = async () => {

        if(datas){
            let res = await axios('/zuishu', { params: { bookID:param.bookID, user: datas } })
            console.log(res.data, 5555)
            var flag = false
            res.data.map((el) => {
                if (el.book_id == param.bookID) {
                    flag = true
                }
                console.log(flag, 99999)
                return flag
            })
            if (flag) {
                alert('已经追过啦！')
            } else {
                let res = await axios('/zuishu2', { params: { bookID: param.bookID, user: datas } })
                alert('追书成功!')
            }
        }else{
            alert('还未登录，请先登录!')
        }

    }

    let [book, setBook] = useState([])
    //加载页面的数据请求
    async function getbook() {
        let res = await axios.get('/book', { params: { bookID: param.bookID} })

        setBook(res.data)

        // console.log(book, 111111, res.data)


    }

    let [chapter, setchapter] = useState([])
    async function getchapter() {
        let res2 = await axios.get('/chapter', { params: { bookID: param.bookID } })
        setchapter(res2.data)

        console.log(res2.data, 22222)
    }

    let [comments, setcomments] = useState([])
    async function getcomments() {
        let res3 = await axios.get('/comments', { params: { bookID: param.bookID } })
        setcomments(res3.data)

        console.log(res3.data)
    }

    useEffect(() => {
        getbook();
        getchapter();
        getcomments();
    }, [])


    //跳转



    return (

        <div>
            {/* 顶部栏 */}
            {
                book.map((el) => {
                    return <div className={c['top']}>
                        <span>酷匠网>{el.name1}</span>
                        <span className={c['top1']}>更新</span>
                        <span className={c['top2']}>签约</span>
                        <div className={c["hr"]}></div>
                    </div>
                })
            }

            <div className={c['content']}>

                <div className={c['contentleft']}>

                    {/* 图片部分 */}
                    <div className={c['left']}>
                        {book.map((el) => {
                            return <img src={el.cover} alt="" />
                        })}
                        <div>
                            <span>
                                {book.map((el) => {
                                    return <NavLink to={`/chapter/${el.bookID}/1`} >立即阅读</NavLink>
                                })}
                            </span>
                            <span className={c['color']} onClick={zuishu} >追书</span>
                        </div>
                    </div>

                    {/* 小说详情 */}
                    <div className={c['right']}>
                        <li>

                            {book.map((el) => {
                                return <span className={c['right1']}>{el.name1}</span>
                            })}

                            {book.map((el) => {
                                return <span> {el.userName} 著 酷匠Tina 责编</span>
                            })}

                        </li>
                        <li>
                            {book.map((el) => {
                                return <span className={c['tb']}>{el.classify}</span>
                            })}
                        </li>

                        {book.map((el) => {
                            return <li>首发时间：{el.bookTime}</li>
                        })}

                        <li>最新公开：第6732章：嘿！ 2022-10-23</li>

                        {book.map((el) => {
                            return <div className={c['contain']}>{el.chapterText}</div>
                        })}

                    </div>

                    <div className={c['clear']}></div>

                    {/* 小说最新章节 */}
                    <div className={c['detail']}>
                        <div className={c['title']}>
                            {book.map((el) => {
                                return <div className={c['titleleft']}>《{el.name1}》最新章节</div>
                            })}

                            <div className={c['titleright']}>查看更多章节》</div>
                        </div>

                        <div className={c['content']}>
                            {chapter.map((el) => {
                                return <div className={c['contentc']}>
                                    <NavLink to={`/chapter/${el.bookID}/${el.chapterID}`} >{el.chapterName}</NavLink>
                                </div>
                            })}
                        </div>
                    </div>

                    {/* 评论区 */}
                    <Tabs defaultActiveKey="1" onChange={callback}>
                        <TabPane tab="最新评论" key="1">

                            <TextArea
                                showCount
                                maxLength={100}
                                style={{
                                    height: 120,
                                    resize: 'none',
                                }}
                                onChange={onChange}
                                placeholder="快来发表你的评论吧！"
                            />
                            <Button type="primary" onClick={submit}>发表评论</Button>

                            {/* 评论详情 */}
                            <div className={c['comments']}>
                                {comments.map((el) => {
                                    return <div className={c['commentss']}>
                                        <img src={el.avatar} alt="" />
                                        <div className={c['user']}>{el.username}</div>
                                        <div className={c['content']}>{el.content}</div>
                                    </div>
                                })}
                            </div>
                        </TabPane>
                    </Tabs>
                    <div>

                    </div>
                </div>

                {/* 右侧栏 */}
                <div className={c['contentright']}>
                    <div className={c['title']}>快来给作品打分吧！</div>

                    <Rate defaultValue='4' />

                    <div className={c['fen']}>综合得分
                        <span>7.7分</span>
                    </div>

                    <div className={c['jia']}>1024次评价</div>

                    <div className={c['biaoqian']}>
                        <span className={c['biao']}>求求快点更！3201</span>
                        <span className={c['biao']}>剧情太慢了2453</span>
                        <span className={c['biao']}>啊啊啊啊啊啊啊啊啊啊1425</span>
                        <span className={c['biao']}>好想看1358</span>
                    </div>
                </div>
            </div>
            <div className={c['clear']}></div>
        </div>

    )
}
